<template>
    <view>
        <view class="container">
            <view class="header">
                <view class="acitveinfo">
                    <view class="item">时间：{{ activeinfo.begintime }}至{{ activeinfo.endtime }}</view>

                    <view class="item">主办：{{ activeinfo.mainwork }}</view>

                    <view class="item">规模：参会企业{{ activerecordlist.length }}家</view>

                    <view class="notice" v-if="list">
                        <text class="fa fa-volume-up fa-lg" style="color: #fff"></text>
                        <swiper class="swiper_container_move" :vertical="true" :autoplay="true" :circular="true" interval="2000">
                            <navigator url="" open-type="navigate" v-for="(item, index) in list" :key="index">
                                <swiper-item>
                                    <view class="swiper_item_move">{{ item.companyname }}</view>
                                </swiper-item>
                            </navigator>
                        </swiper>
                    </view>
                </view>
            </view>

            <view class="companylist" v-if="activerecordlist">
                <view class="jobitem" v-for="(item, index) in activerecordlist" :key="index">
                    <image :src="item.thumb" class="img"></image>

                    <view class="jobtitle">{{ item.companyname }}</view>

                    <view class="joblist">
                        <view class="title" v-for="(itemjob, index1) in item.joblist" :key="index1">
                            <view></view>

                            <view>{{ itemjob.jobtitle }}</view>
                        </view>
                    </view>

                    <view class="jobcount">共用{{ item.jobcount }}个职位招聘</view>

                    <view class="sendjob" @tap="doSendjob" :data-id="itemjob.id" :data-companyid="item.companyid">投递简历</view>
                </view>
            </view>
        </view>

        <view class="weixinmao-float">
            <view class="weixinmao-foot">
                <view class="footer" @tap="toPayactive">企业报名</view>
            </view>
        </view>
    </view>
</template>

<script>
import { Active } from '../../model/active-model.js';
var active = new Active();
export default {
    data() {
        return {
            id: 0,

            activeinfo: {
                begintime: '',
                endtime: '',
                mainwork: ''
            },

            companycount: '',
            activerecordlist: '',
            list: []
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (e) {
        this.onLoadClone3389(e);
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        uni.showNavigationBarLoading();
        this.onLoadClone3389({});
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {
        var that = this;
        return {
            title: that.title,
            path: '/pages/activedetail/index?id=' + that.id
        };
    },
    methods: {
        /**
         * 生命周期函数--监听页面加载
         */
        onLoadClone3389: function (e) {
            var that = this;
            if (that.id > 0) {
                var id = that.id;
            } else {
                var id = e.id;
                that.id = e.id;
            }
            uni.showShareMenu({
                withShareTicket: true,
                menus: ['shareAppMessage', 'shareTimeline']
            });
            var params = {
                id: that.id
            };
            active.GetActivedetail((data) => {
                uni.setNavigationBarTitle({
                    title: data.activeinfo.title
                });
                that.title = data.activeinfo.title;
                that.setData({
                    activeinfo: data.activeinfo,
                    companycount: data.companycount,
                    activerecordlist: data.activerecordlist
                });
                uni.hideNavigationBarLoading(); //完成停止加载
                uni.stopPullDownRefresh();
            }, params);
        },

        toPayactive: function () {
            var that = this;
            var aid = that.id;
            var ctoken = uni.getStorageSync('ctoken');
            if (ctoken) {
                var params = {
                    ctoken: ctoken,
                    aid: aid
                };
                active.CheckActiveRecord((data) => {
                    if (data.status == 0) {
                        uni.showToast({
                            title: data.msg,
                            icon: 'none',
                            duration: 2000
                        });
                    } else if (data.status == 2) {
                        uni.navigateTo({
                            url: '/pages/companylogin/index'
                        });
                    } else {
                        uni.showToast({
                            title: data.msg,
                            icon: 'none',
                            duration: 2000
                        });
                    }
                }, params);
            } else {
                uni.navigateTo({
                    url: '/pages/companylogin/index'
                });
            }
        },

        doSendjob: function (e) {
            var that = this;
            var id = e.currentTarget.dataset.companyid;
            uni.navigateTo({
                url: '/pages/companydetail/index?id=' + id
            });
        }
    }
};
</script>
<style>
/* weixinmao_zp/pages/activenew/index.wxss */
page {
    background: #a1d3f1;
}

.container {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header {
    width: 100%;
    height: 400rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header .acitveinfo {
    display: flex;
    flex-direction: column;

    width: 600rpx;

    padding-top: 40rpx;
}

.header .acitveinfo .item {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 20rpx;
}

.notice {
    width: 600rpx;
    background: #b1dbf5;
    margin-top: 20rpx;
    display: flex;
    flex-direction: row;
    font-size: 0.8rem;
    border-radius: 5rpx;
}
.notice text {
    color: #fff;
    margin-top: 10rpx;
    margin-right: 10rpx;
    padding-left: 5rpx;
    padding-top: 5rpx;
}

.swiper_container_move {
    height: 55rpx;
    line-height: 55rpx;
    width: 600rpx;
}

.swiper_item_move {
    font-size: 25rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 2px;
    color: #fff;
}

.companylist {
    width: 700rpx;
    background: #f6d3d1;
    border-radius: 15rpx;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    padding-bottom: 30rpx;
}

.companylist .jobitem {
    width: 332rpx;
    height: 450rpx;
    background: #fff;
    border-radius: 5rpx;
    margin: 100rpx 10rpx 10rpx 10rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 100rpx;
    position: relative;
}

.companylist .jobitem .jobtitle {
    font-size: 0.9rem;
    font-weight: bold;
    color: #000;
    width: 300rpx;
}

.jobitem .img {
    width: 150rpx;
    height: 150rpx;
    position: absolute;
    border-radius: 50%;
    left: 90rpx;
    top: -50rpx;
}

.joblist {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 300rpx;
    margin-top: 20rpx;
    justify-content: space-between;
}

.joblist .title {
    width: 140rpx;
    font-size: 0.7rem;
    margin-right: 7rpx;
    display: flex;
    flex-direction: row;
}

.joblist .title view:nth-child(1) {
    width: 10rpx;
    height: 10rpx;
    border-radius: 100%;
    background: #cd4a52;
    align-self: center;
    margin-right: 5rpx;
}

.jobcount {
    width: 280rpx;
    border-radius: 10rpx;
    border: 1rpx solid #3da5e6;
    color: #0180cf;
    font-size: 0.7rem;
    padding: 10rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30rpx;
}
.sendjob {
    width: 250rpx;
    color: #fff;
    height: 70rpx;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0180cf;
    border-radius: 5rpx;
    margin-top: 30rpx;
}

.weixinmao-float {
    height: 150rpx;
}
.weixinmao-foot {
    display: flex;
    justify-content: center;
    flex-direction: row;
    position: fixed;
    z-index: 999;
    left: 0;
    bottom: 0;
    width: 100%;
}

.footer button {
    color: #fff;
    align-self: center;
    height: 80rpx;
    font-size: 1.5rem;
    display: flex;
    flex-direction: column;
    background: #0180cf;
    text-align: center;
    padding-top: 10rpx;
    border: 0rpx;
}

button::after {
    border: none;
}

.black {
    color: #777676;
}
.red {
    color: red;
}
.weixinmao-foot view:nth-child(1) {
    color: #fff;
    align-self: center;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    font-size: 0.9rem;
    display: flex;
    flex-direction: column;
    background: #0180cf;
    width: 100%;
}

.weixinmao-foot view image {
    width: 50rpx;
    height: 50rpx;
    align-self: center;
}

.footerbutton {
    background: #0180cf;
}
</style>
